<template>
  <div class="add-contact-container">
    <div class="add-contact-title drag">申请添加朋友</div>

    <div class="add-contact-form">
      <el-scrollbar style="height: calc(100vh - 160px)">
        <el-form
          ref="contactFormRef"
          :model="formData"
          label-width="auto"
          :label-position="labelPosition"
          :size="size"
        >
          <el-form-item label="发送添加朋友申请">
            <el-input v-model="formData.applyInfo" />
          </el-form-item>

          <el-form-item label="备注名">
            <el-input v-model="formData.remark" />
          </el-form-item>

          <el-form-item label="设置朋友权限">
            <div
              v-for="permission in permissions"
              class="permission"
              :class="{ selected: formData.permission === permission.value }"
              @click="formData.permission = permission.value"
            >
              <div class="permission-icon">
                <span :class="['iconfont', permission.icon]"></span>
              </div>

              <div class="permissiion-item">
                {{ permission.label }}
              </div>

              <div
                v-if="formData.permission === permission.value"
                class="check-icon"
              >
                <el-icon color="#67C23A"><Select /></el-icon>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="朋友圈和状态" v-if="formData.permission === 1">
            <div class="permission">
              <div class="permission-icon">
                <span class="iconfont icon-bukantade"></span>
              </div>

              <div class="permissiion-item">
                不让他（她）看

                <el-switch
                  v-model="formData.hideMe"
                  class="switch-icon"
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #e5e5e5;
                  "
                />
              </div>
            </div>

            <div class="permission">
              <div class="permission-icon">
                <span class="iconfont icon-burangtakan"></span>
              </div>

              <div class="permissiion-item">
                不看他（她）
                <el-switch
                  v-model="formData.hideOther"
                  class="switch-icon"
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #e5e5e5;
                  "
                />
              </div>
            </div>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>

    <div class="add-contact-opt">
      <el-button type="primary" size="large" color="#07c160" @click="addContact"
        >确定</el-button
      >

      <el-button
        type="primary"
        size="large"
        color="#e1e1e1"
        @click="cancelAddContact"
        >取消</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ComponentSize, FormProps } from "element-plus";
import { ref } from "vue";
import { Select } from "@element-plus/icons-vue";
import { applyAddContact } from "@/api/contact";
import { useRoute } from "vue-router";

const route = useRoute();
const uid = +route.params.uid;
console.log(uid);

const labelPosition = ref<FormProps["labelPosition"]>("top");
const size = ref<ComponentSize>("default");
const formData = ref({
  applyInfo: "我是",
  remark: "",
  permission: 1,
  hideMe: 0,
  hideOther: 0,
});

const permissions = ref([
  {
    label: "聊天、朋友圈、微信运动等",
    value: 1,
    icon: "icon-pengyouquan",
  },
  {
    label: "仅聊天",
    value: 2,
    icon: "icon-comment-remove",
  },
]);

const addContact = async () => {
  const applyContactRes = await applyAddContact({
    contactId: uid,
    contactType: 1,
    remark: formData.value.remark,
    applyInfo: formData.value.applyInfo,
    permission: {
      permissionType: formData.value.permission,
      hideMe: +formData.value.hideMe,
      hideOther: +formData.value.hideOther,
    },
  });

  console.log(applyContactRes);
};

const cancelAddContact = () => {
  window.ipcRenderer.winTitleOp("close", 0);
};
</script>

<style scoped lang="scss">
.add-contact-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #ededed;

  .add-contact-title {
    width: 100%;
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: black;
  }

  .add-contact-form {
    padding: 5px 15px 0px 15px;

    .permission {
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: center;
      background-color: #fff;
      width: 100%;
      height: 50px;
      position: relative;

      .permission-icon {
        width: 50px;
        display: flex;
        justify-items: center;
        align-items: center;

        span {
          width: 100%;
          height: 100%;
          text-align: center;
        }
      }

      .permissiion-item {
        width: 100%;
        height: 100%;
        line-height: 50px;
        position: relative;

        .switch-icon {
          position: absolute;
          right: 30px;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      &:first-child .permissiion-item {
        border-bottom: 1px solid #f2f2f2;
      }

      & .selected {
      }

      .check-icon {
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
      }
    }
  }

  .add-contact-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;

    .el-button {
      width: 150px;
    }
  }
}
</style>
